<template>
    <div class="custom__markdown">
        <div class="custom__markdown-content" v-html="renderedContent"></div>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import MarkdownIt from 'markdown-it'
    import hljs from 'highlight.js'

    // 导入 Vue 语言支持
    import xml from 'highlight.js/lib/languages/xml'
    import javascript from 'highlight.js/lib/languages/javascript'
    import css from 'highlight.js/lib/languages/css'

    // 使用更现代的主题
    import 'highlight.js/styles/github-dark.css'

    // 导入更多语言支持
    // import 'highlight.js/lib/common'

    // 注册语言
    hljs.registerLanguage('vue', xml)  // Vue 模板部分使用 xml 高亮
    hljs.registerLanguage('javascript', javascript)  // script 部分
    hljs.registerLanguage('css', css)  // style 部分

    // Markdown 渲染
    const props = defineProps<{
        content: string
    }>()

    // Markdown 创建
    const md = new MarkdownIt({
        html: true,
        linkify: true,
        typographer: true,
        highlight: function (str: string, lang: string): string {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    const highlighted = hljs.highlight(str, {
                        language: lang,
                        ignoreIllegals: true
                    }).value;

                    // 添加行号和更好的样式包装
                    const lines = highlighted.split('\n').map((line, index) => (
                        `<div class="hljs-line">` +
                        `<span class="hljs-line-number">${index + 1}</span>` +
                        `<span class="hljs-line-content">${line}</span>` +
                        `</div>`
                    )).join('');


                    return (
                        `<div class="custom__markdown-code-block">` +
                        // -----------------------------------------------------
                        `<div class="custom__markdown-code-header">` +
                        `<button class="custom__markdown-code-copy-btn" data-code="${encodeURIComponent(str)}">复制</button>` +
                        `</div>` +
                        // -----------------------------------------------------
                        `<pre class="custom__markdown-hljs">` +
                        `<code class="language-${lang}">${lines}</code>` +
                        `</pre>` +
                        // -----------------------------------------------------
                        `</div>`
                    )
                } catch (error) {
                    console.error('Highlight error:', error);
                }
            }
            return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
        }
    })

    // Markdown 渲染内容
    const renderedContent = ref('')

    onMounted(() => {
        renderedContent.value = md.render(props.content)

        // 添加复制功能
        setTimeout(() => {
            document.querySelectorAll('.custom__markdown-code-copy-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const code = decodeURIComponent((e.target as HTMLElement).getAttribute('data-code') || '');
                    navigator.clipboard.writeText(code).then(() => {
                        (e.target as HTMLElement).textContent = '已复制';
                        setTimeout(() => {
                            (e.target as HTMLElement).textContent = '复制';
                        }, 2000);
                    });
                });
            });
        })
    })
</script>

<style lang="scss" scoped>
    .custom__markdown {

        // 内容
        ::v-deep(.custom__markdown-content) {
            .custom__markdown-code-block {
                padding: 10px;
                border-radius: 6px;
                background: #1e1e1e;
                overflow: hidden;
                position: relative;

                // 代码头部
                .custom__markdown-code-header {
                    height: 30px;
                    position: absolute;
                    display: flex;
                    top: 10px;
                    right: 10px;
                }

                // 复制按钮
                .custom__markdown-code-copy-btn {
                    padding: 0 15px;
                }
            }

            // 高亮代码区
            .custom__markdown-hljs {
                margin: 0;
                // padding: 1em;
                background: transparent;

                // 代码行
                code {
                    .hljs-line {
                        display: flex;

                        // 行号
                        .hljs-line-number {
                            user-select: none;
                            color: #fff;
                            text-align: right;
                            padding-right: 1em;
                            min-width: 2em;
                        }

                        // 标签箭头
                        .hljs-tag {
                            color: #fff;
                        }

                        // 标签名
                        .hljs-name {
                            color: #00ffb3;
                        }

                        // 标签属性
                        .hljs-attr {
                            color: #ffbf00;
                        }

                        // 标签属性内容
                        .hljs-string {
                            color: #11e8f7;
                        }

                        // 注释
                        .hljs-comment {
                            color: #aaff00;
                        }

                        // 内容
                        .hljs-line-content {
                            // flex: 1;
                            color: #ffffff;
                        }

                        // 关键字
                        .hljs-string {
                            color: #ff0062;
                        }
                    }
                }
            }

            // 表格样式
            table {
                margin-left: 20px;
                border-collapse: collapse;
                border-spacing: 0;
                width: 100%;
                max-width: 1000px;

                // 列
                th,
                td {
                    text-align: left;
                    padding: 10px 20px;
                    border-bottom: 1px solid #dfe2e5;

                    &:nth-of-type(1) {
                        width: 200px;
                    }

                    &:nth-of-type(2) {
                        width: 350px;

                    }

                    &:nth-of-type(3) {
                        width: 100px;
                        // text-align: center;

                    }

                    &:nth-last-of-type(1) {
                        width: auto;
                        text-align: left
                    }

                    &:nth-of-type(4) {
                        width: auto;
                        text-align: center;
                    }
                }
            }
        }
    }

    // .custom__markdown {
    //     padding: 20px;
    //     line-height: 1.6;

    //     ::v-deep(.custom__markdown-content) {
    //         pre {
    //             background-color: #f6f8fa;
    //             padding: 16px;
    //             border-radius: 6px;
    //             overflow: auto;

    //             // 添加代码块行号
    //             counter-reset: line;

    //             code {
    //                 color: #d4d4d4; // VS Code 默认文本颜色
    //                 line-height: 1.5;
    //                 font-size: 14px;

    //                 // 代码高亮自定义颜色
    //                 .hljs-keyword {
    //                     color: #569cd6;
    //                 }

    //                 // 关键字
    //                 .hljs-string {
    //                     color: #ce9178;
    //                 }

    //                 // 字符串
    //                 .hljs-comment {
    //                     color: #6a9955;
    //                 }

    //                 // 注释
    //                 .hljs-function {
    //                     color: #dcdcaa;
    //                 }

    //                 // 函数
    //                 .hljs-number {
    //                     color: #b5cea8;
    //                 }

    //                 // 数字
    //                 .hljs-class {
    //                     color: #4ec9b0;
    //                 }

    //                 // 类名
    //                 .hljs-tag {
    //                     color: #569cd6;
    //                 }

    //                 // HTML/XML标签
    //                 .hljs-attr {
    //                     color: #9cdcfe;
    //                 }

    //                 // 属性名
    //                 .hljs-built_in {
    //                     color: #4ec9b0;
    //                 }

    //                 // 内置对象
    //             }
    //         }

    //         code {
    //             font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    //         }

    //         h1,
    //         h2,
    //         h3,
    //         h4,
    //         h5,
    //         h6 {
    //             margin-top: 24px;
    //             margin-bottom: 16px;
    //             font-weight: 600;
    //             line-height: 1.25;
    //         }

    //         p {
    //             margin-top: 0;
    //             margin-bottom: 16px;
    //         }

    //         ul,
    //         ol {
    //             padding-left: 2em;
    //             margin-top: 0;
    //             margin-bottom: 16px;
    //         }

    //         // 表格样式
    //         table {

    //             tr {
    //                 border-bottom: 1px solid #dfe2e5;
    //             }

    //             th,
    //             td {
    //                 text-align: left;
    //                 padding: 10px 20px;
    //                 border-bottom: 1px solid #dfe2e5;

    //                 &:nth-of-type(1) {
    //                     width: 200px;
    //                 }

    //                 &:nth-of-type(2) {
    //                     width: 150px;
    //                 }

    //                 &:nth-of-type(3) {
    //                     width: 100px;
    //                     text-align: center;
    //                 }

    //                 &:nth-of-type(4) {
    //                     width: 300px;
    //                 }
    //             }
    //         }
    //     }
    // }
</style>